#community-container{
  max-width: 10rem;
  margin: 0 auto;
  height: calc(100vh - 98px);
  overflow: hidden;
  overflow-y: auto;
  background:rgba(245,245,245,1);
  .community-header{
    width: 100%;
    padding: 24px 20px 0;
    height: 238px;
    line-height: 60px;
    font-weight:bold;
    font-size:40px;
    font-family:Source Han Sans CN;
    color: #fff;
    background: url('../../../static/images2/community-header.png') no-repeat;
    background-size: cover;
    box-sizing: border-box;
  }
  .tab{
    float: left;
    span{
      position: relative;
      margin-left: 60px;
      &:first-of-type{
        margin-left: 0;
      }
      &.active::after{
        display: block;
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 6px;
        background:linear-gradient(90deg,rgba(249,30,98,1) 0%,rgba(0,8,245,1) 100%);
        opacity:1;
        border-radius:55px;
      }
    }
  }
  .publish{
    float: right;color: #fff;
    .icon-add{
      display: inline-block;
      width: 45px;
      height: 45px;
      margin-right: 8px;
      vertical-align: sub;
      background: url('../../../static/images2/community-add.png') no-repeat center;
      background-size: cover;
    }
  }

  .list-container{
    width: 100%;
    padding: 0 20px;
    margin-top: -108px;
    box-sizing: border-box;
    .fun-container{
      padding: 20px;
      border-radius:16px;
    }
  }
}